<template>
  <div class="container">
    <div class="avatar">
      <el-avatar
        style="width: 100px; height: 100px"
        :src="proxy.imageUrl + user.avatar"
        fit="fill"
      />
    </div>
    <div class="info">
      <div class="nickName">{{ user.nickName }}</div>
      <div class="profession">职位:{{ user.profession }}</div>
      <div class="blogCount">博客数:{{ user.blogCount }}篇</div>
    </div>
    <div class="introduction">
      <el-scrollbar>
        个人简介:<hr/>
        <div v-html="user.introduction"></div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import {
  getCurrentInstance,
  onBeforeMount,
  ref,
} from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const { proxy } = getCurrentInstance();

const userId = ref(route.params.userId);

// 部署前执行
onBeforeMount(() => {
  getUserList();
});

// 获取用户详情
const user = ref({});
const getUserList = async () => {
  let result = await proxy.Request({
    url: "/view/loadTeamUser",
  });
  if (!result) {
    return;
  }
  result.data.forEach((item) => {
    if (item.userId == userId.value) {
      user.value = item;
      return
    }
  });
};
</script>
<style lang="scss" scoped>
.container{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 100%;
  padding: 10px 24px;
  min-width: 630px;
  max-height: calc(100vh - 140px);
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 2px 6px 0 #ddd;
  border-radius: 10px;

  .avatar{
    height: 100px;
  }
  .info{
    margin-left: 20px;
    height: 100px;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;

    .nickName{
      font-size: 20px;
    }

    .blogCount{
      font-size: 14px;
      opacity: .6;
    }
  }
  
  .introduction{
    margin-top: 20px;
  }
}
</style>;
